import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Input } from 'antd';
import { Button, Flex } from 'antd';
import { NavLink } from 'react-router-dom';
import { Toast, Cell } from '@nutui/nutui-react'
export default function Cate() {
  const [list, setList] = useState([])
  const [fen, setFen] = useState([])
  const [name, setName] = useState('')
  const [nums, setNums] = useState(0)
  const [ids, setIds] = useState('')
  const [idd, setIdd] = useState('')
  const [his, setHis] = useState([])
  const [showTop, setShowTop] = useState(false)
  useEffect(() => {
    getList()
    getFen()
    getHis()
  }, [])
  const getList = async () => {
    let data = await axios.get(`http://127.0.0.1:3000/cate/list/?name=${name}`)
    setList(data.data.data)
  }
  const getFen = async () => {
    let data = await axios.get(`http://127.0.0.1:3000/cate/fen`)
    setFen(data.data.data)
    setIds(data.data.data[0]._id)
    setIdd(data.data.data[0]._id)
  }
  console.log(nums)
  function search() {
    getList()
    setNums(0)
  }
  async function getHis(){
    let data=await axios.get(`http://127.0.0.1:3000/cate/his`)
    setHis(data.data.data)
  }
  async function add(){
    await axios.post(`http://127.0.0.1:3000/cate/add`,{name:name})
    getList()
  }
  async function che(good) {
    await axios.post(`http://127.0.0.1:3000/cate/che`, { _id: good._id, goods: good.goods })
    Toast.show({
      content: '成功加入购物车',
      icon: 'success',
    })
  }
  console.log(ids)
  return (
    <div style={{ overflow: 'hidden' }}>
      <h2 style={{ textAlign: 'center', marginTop: '10px' }}>分类</h2>
      <Input placeholder="搜索商品~好货等你" style={{ width: '300px', height: '30px', borderRadius: '30px', marginLeft: '85px', background: '#dedede', marginTop: '10px' }} onChange={(i) => setName(i.target.value)} onFocus={() => setNums(1)} onBlur={() => {
        if (name.length > 0) {
          search()
          setNums(0)
          add()
        } else {
          setNums(0)
        }
      }} value={nums == 0 ? '' : name} />
      <Button type="text" style={{ display: nums != 0 ? 'inline-block' : 'none' }}>
        {name.length == 0 ? '取消' : '搜索'}
      </Button>
      <ul style={{display:nums==0?'none':'inline',marginTop:'20px',marginLeft:'500px',width:'300px'}}>
        <li><h3 style={{marginLeft:'30px',marginBottom:'10px'}}>浏览历史</h3></li>
        {his.map((i,index)=><li key={index} style={{marginLeft:'70px',marginTop:'0px',background:'gray',width:'300px',height:'25px',lineHeight:'25px',color:'white'}}>
          <big>{i.name}</big>
        </li>)}
      </ul>
      
      <div style={{ float: 'left' }}>
        {fen.map((i, index) => <div key={index} style={{ width: '100px', height: '30px', lineHeight: '30px', background: ids == i._id ? 'red' : '', color: 'black', borderRadius: '30px', textAlign: 'center', marginTop: '18px', marginLeft: '10px' ,display:nums==1?'none':'block'}} onClick={() => setIds(i._id)}>
          <b>{i.name}</b>
        </div>)}
      </div>

      {list.map((i, index) =>
        <div style={{ border: '2px solid #dedede', height: '250px', width: '70%', borderRadius: '5%', float: 'right', marginTop: '20px', marginRight: '5px', display: nums == 1 ? 'none' : (ids == i.cate ? 'inline' : (ids == idd ? 'inline' : 'none')) }} key={index} >

          <NavLink to={`/cate/?_id=${i._id}`}>
            <img src={i.img} style={{ width: '300px', height: '150px', marginLeft: '10px', marginTop: '5px', borderRadius: '5px' }} ></img>
          </NavLink>
          <div style={{ marginLeft: '10px', marginTop: '7px' }}>
            <p><b>{i.name}</b></p>
            <p style={{ marginTop: '5px' }}>提货时间：{i.time}</p>
            <p style={{ color: 'red' }}><b>￥{i.time}</b>
              <span style={{ color: 'gray', marginLeft: '7px' }}>
                已售2700件
              </span>

              <Button style={{ borderRadius: '25px', width: '100px', height: '25px', background: 'red', color: 'white', lineHeight: '25px', marginLeft: '10px' }} onClick={() => che(i)}><b>
                <Cell
                  title="加入购物车"
                  onClick={() =>
                    Toast.show({
                      content: '成功加入购物车',
                      icon: 'success',
                    })
                  }
                  style={{ background: 'red', color: 'white', width: '100px', borderRadius: '30px', textAlign: 'center', height: '30px', lineHeight: '5px' }}
                >
                </Cell>
              </b></Button>

            </p>
          </div>

        </div>
      )}

    </div>
  )
}
